<template>
  <el-container>
    <el-aside :class="is_collapse ? 'is-hide' : 'is-open'"><Aside></Aside></el-aside>
    <el-container>
      <el-header><Header></Header></el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>
        <div class="foot-box">你的智能店长助手</div>
        <div> ©- 大圣解忧@CopyRight 2020</div>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import Aside from '@/components/aside.vue'
import Header from '@/components/header.vue'
import { mapGetters } from 'vuex'

export default {
  components: { Aside, Header },
  computed: {
   ...mapGetters(['is_collapse'])
  }
};
</script>

<style lang="scss" scoped>
.el-aside {
  overflow-x: hidden;
  background-color: #fff;
}

.is-open {
  width: 200px !important;
}

.is-hide {
  width: 64px !important;
}

.el-header {
  background-color: #fff;
  line-height: 60px;
  height: 60px !important;
}

.el-main {
  background-color: #ededed;
  height: calc(100vh - 120px);

  .router-view {
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.el-footer {
  background-color: #fff;
  height: 60px !important;
  text-align: center;
  color: #6A5ACD;
  .foot-box {
    margin: 5px 0;
  }
}
</style>